<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<!DOCTYPE html>
<html>
<%@include file="../base/frameBase.jsp" %>
<!--引入Ztree-->
<link rel="stylesheet" href="${ctx}/static/plugin/ztree-bootstrap/css/bootstrapStyle/zTreeStyle.css" type="text/css">
<link rel="stylesheet" href="${ctx}/static/plugin/ztree-bootstrap/css/bootstrapStyle/bootstrapStyle.css" type="text/css">
<script type="text/javascript" src="${ctx}/static/plugin/ztree-bootstrap/js/jquery.ztree.all.js"></script>
<link rel="stylesheet" href="${ctx}/static/css/menuManager.css" type="text/css">
<body>
<fieldset class="layui-elem-field site-demo-button left-menu-show"><legend>菜单树</legend>
<div class="left-menu-show">
    <ul id="treeDemo" class="ztree"></ul>
</div>
</fieldset>
<fieldset class="layui-elem-field site-demo-button right-menu-edit" ><legend>编辑</legend>
<div class="right-menu-edit">
    <form class="layui-form layui-form-pane" action="">
        <div class="layui-form-item">
            <label class="layui-form-label">菜单名称</label>
            <div class="layui-input-inline">
                <input  name="menuName" lay-verify="pass" placeholder="..." autocomplete="off" class="layui-input">
            </div>
            <div class="layui-form-mid layui-word-aux">请规范命名</div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">图标选择</label>
            <div class="layui-input-inline">
                <select name="interest" lay-filter="aihao">
                    <option value=""></option>
                    <option value="0">写作</option>
                    <option value="1" selected="">阅读</option>
                    <option value="2">游戏</option>
                    <option value="3">音乐</option>
                    <option value="4">旅行</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">链接</label>
            <div class="layui-input-block">
                <input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="请输入标题" class="layui-input">
            </div>
        </div>
    </form>

    <div class="layui-btn-group btn-group">
        <button class="layui-btn">确定</button>
        <button class="layui-btn layui-btn-warm">取消</button>
    </div>
</div>
</fieldset>
<div>

</div>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="agreeApply">通过</a>
    <a class="layui-btn layui-btn-xs" lay-event="disAgreeApply">拒绝</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delApply">删除申请记录</a>
</script>

<script>
    layui.use('form', function(){

    });
    var zTreeObj;
    // zTree 的参数配置，深入使用请参考 API 文档（setting 配置详解）
    var setting = {
        view: {
            showLine: true, //显示辅助线
            dblClickExpand: true,
        },
        data: {
            simpleData: {
                enable: true,
                idKey: "id",
                pIdKey: "pid",
                rootPId: 0
            }
        },
        callback: { //回调设置
            onClick: function (e, treeId, treeNode) {
                alert("111");
            },onRemove:function (e,treeid,treeNode) {
                debugger;
                alert("删除菜单");
            }
        },
        edit: {
            enable:true,
            showRemoveBtn : true,
            showRenameBtn : false,
            removeTitle:"删除菜单"
        }
    };
    // zTree 的数据属性，深入使用请参考 API 文档（zTreeNode 节点数据详解）
    var zNodes = [{name: "系统管理", id: 0, pId: 11, children: [{name: "菜单管理", id:12, childred: [{}]}]}, {
        name: "用户中心",
        id: 13,
        pId: 0,
        children: [{name: "用户审核单", id: 2}, {name: "用户创建", id: 2}]
    }]

    $(document).ready(function () {
        zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes);
        zTreeObj.expandAll(true);
    });


    function clickA(e, treeId, treeNode) {
        if (treeNode.isParent) //如果不是叶子结点，结束
            return;
        alert(treeNode.name); //获取当前结点上的相关属性数据，执行相关逻辑
    };

</script>
</body>
</html>
<%@include file="../base/frameFoot.jsp" %>